import React from 'react';
import { browserHistory } from 'react-router';

import router from '../../utils/routerDecorator';
import Selector from '../components/Selector/Selector';
import { checkAccessToken } from '../../logic/api';

import {Menu, Breadcrumb, Icon} from 'antd';

import styles from './Site.less';

@router('/site')
export default class Site extends React.Component {
  
  static childRoutes = [
    require('./user/main').default.route,
    require('./pubedit/main').default.route,
    require('./cates/main').default.route,
    require('./goods/main').default.route,
    require('./custom/main').default.route
  ]

  state = {

  }

  links = {
    sub_user:{
      subtitle:<span><Icon type = "setting"/>用户</span>,
      options:{
        users:{
          text:"用户管理",
          link:"/site/user"
        }
      }
    },
    sub_pub:{
      subtitle:<span><Icon type = "setting"/>发布</span>,
      options:{
        pubedit:{
          text:"发布管理",
          link:"/site/pubedit"
        },
        commentdel:{
          text:"话题评论删除",
          link:"/site/commentdel"
        }
      }
    },
    sub_goods:{
      subtitle:<span><Icon type = "setting"/>商品</span>,
      options:{
        cates:{
          text:"分类管理",
          link:"/site/cates"
        },
        info:{
          text:"详情管理",
          link:"/site/goods"
        },
        customizecates:{
          text:"定制管理",
          link:"/site/custom"
        },
      }
    },
    sub_orders:{
      subtitle:<span><Icon type = "setting"/>订单</span>,
      options:{
        orderinfo:{
          text:"订单信息",
          link:"/site/orders"
        }
      }
    },
    sub_other:{
      subtitle:<span><Icon type = "setting"/>其它</span>,
      options:{
        other:{
          text:"其它",
          link:"/site/other"
        }
      }
    }
  };

  async componentWillMount(){
    var ret = await checkAccessToken();
    if (!ret){
      browserHistory.replace('/');
    }
  }

  titleOnclick(e){
    browserHIstory.replace("/site");
  }

  menuItemOnclick(e){
    var link = this.links[e.keyPath[1]].options[e.keyPath[0]].link;
    browserHistory.replace(link);
  }

  render(){
    return <div>
      <div className = {styles.title}>
        <Menu onClick = {(e)=>this.titleOnclick(e)} theme = "dark" mode = "horizontal" style = {{lineHeight: '64px'}}>
          <Menu.Item key = "main">管理后台</Menu.Item>
        </Menu>
      </div>
      <div className = {styles.undertitle}>
        <div className = {styles.sidemenu}>
          <Menu theme = "dark" onClick = {(e)=>this.menuItemOnclick(e)} style = {{width: 240}} mode = "inline">
            {
              Object.keys(this.links).map((sk, si)=>
                <Menu.SubMenu key = {sk} title = {this.links[sk].subtitle}>
                  {
                    Object.keys(this.links[sk].options).map((k, i)=>
                      <Menu.Item key = {k}>
                        {this.links[sk].options[k].text}
                      </Menu.Item>
                    )
                  }
                </Menu.SubMenu>
              )
            }
          </Menu>
        </div>
        <div className = {styles.content}>
          {this.props.children}
        </div>
        <div style = {{clear:'both'}}/>
      </div>
      <div className = {styles.footer}>
        HzErica Admin Start Kit
      </div>
    </div>
  }

}